const addFileBtns = document.querySelector(".add-file");
const fileInput = document.querySelector("#file");
const uploadArea = document.querySelector(".upload-area");
const uploadListTBody = document.querySelector(".upload-list tbody");
const dialogCloseBtn = document.querySelector(".preview-dialog-close");
const previewDialogBody = document.querySelector(".preview-dialog-body");
const filenameAndFileMap = new Map();

function fileChange() {
  const files = fileInput.files;
  console.log(files);
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    const tr = document.createElement("tr");
    tr.innerHTML = `
            <td>${file.name}</td>
            <td>${file.size}</td>
            <td>${file.type ? file.type : file.name.split(".")[1]}</td>
            <td>${file.lastModified}</td>
            <td>
              <button class="delete-file">删除</button>
              <button class="preview-file">预览</button>
            </td>
          `;
    uploadListTBody.appendChild(tr);

    filenameAndFileMap.set(file.name, file);
  }

  // 无法立即获取到删除按钮，因为删除按钮是在添加文件后才生成的
  // 所以需要在添加文件后再获取删除按钮
  handleDeleteFile();
  handlePreviewFile();
}

addFileBtns.addEventListener("click", () => {
  fileInput.click();
  fileInput.addEventListener("change", fileChange);
});

uploadArea.addEventListener("dragover", (e) => {
  e.preventDefault();
});

uploadArea.addEventListener("drop", (e) => {
  e.preventDefault();
});

function handleDeleteFile() {
  const deleteFileBtns = document.querySelectorAll(".delete-file");
  //   console.log(deleteFileBtns);
  deleteFileBtns.forEach((btn) => {
    btn.addEventListener("click", (e) => {
      deleteFile(e);
    });
  });
}

function deleteFile(e) {
  const tr = e.target.parentElement.parentElement;
  tr.remove();
}

function previewFileBtnClick(e) {
  previewFile(e);
}

function handlePreviewFile() {
  const previewFileBtns = document.querySelectorAll(".preview-file");

  previewFileBtns.forEach((btn) => {
    btn.addEventListener("click", previewFileBtnClick);
  });
}

function previewFile(e) {
  const previewDialog = document.querySelector(".preview-dialog");
  previewDialog.style.visibility = "visible";

  const tr = e.target.parentElement.parentElement;
  const fileName = tr.children[0].innerText;
  const file = filenameAndFileMap.get(fileName);
  const fileType = file.type;
  if (fileType.startsWith("image/")) {
    previewImage(file);
  } else if (fileType.startsWith("text/")) {
    previewText(file);
  }
}

dialogCloseBtn.addEventListener("click", () => {
  const previewDialog = document.querySelector(".preview-dialog");
  previewDialog.style.visibility = "hidden";
  console.log(previewDialogBody.childNodes);
  previewDialogBody.childNodes.forEach((node) =>
    previewDialogBody.removeChild(node)
  );
  console.log(previewDialogBody.childNodes);
});

function previewImage(file) {
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function () {
    const img = document.createElement("img");
    img.src = reader.result;
    img.style.width = "100%";
    img.style.height = "100%"; // 限制图片大小
    previewDialogBody.appendChild(img);
  };
}

function previewText(file) {
  const reader = new FileReader();
  reader.readAsText(file);
  reader.onload = function () {
    const p = document.createElement("p");
    p.innerText = reader.result;
    previewDialogBody.appendChild(p);
  };
}
